<template>

	<div class="page-content">
		<!--//搜索组件-->
		<router-link to="/search">
			<div class="search" v-show="!showABS" :style="opacityStyle">
				<input type="" name="" id="" value="" placeholder="搜索关键字" />
			</div>
		</router-link>
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<div class="header">
				<router-link to="/search">
					<div class="sous">

					</div>
				</router-link>
				<!--轮播 -->
				<swipe class="my-swipe">
					<swipe-item class="slide1" v-for="item in someListImg" :key="item.id">
						<img :src="item.advert_img" alt="">
					</swipe-item>
				</swipe>

			</div>

			<ul class="entrance">
				<li>
					<router-link to="/information">
						<img src="../../assets/imgs/home/home_message@2x.png">
						<span>资讯</span>
					</router-link>
				</li>
				<li>
					<router-link :to="{name:'specialty',params:{type:2,title:'特产'}}">
						<img src="../../assets/imgs/home/home_specialcy@2x.png">
						<span>特产</span>
					</router-link>
				</li>
				<li>
					<router-link :to="{name:'specialty',params:{type:1,title:'菌库'}}">
						<img src="../../assets/imgs/home/home_mushroom@2x.png">
						<span>菌库</span>
					</router-link>
				</li>
				<li>
					<router-link to="/intangibleHeritage" :to="{name:'specialty',params:{type:3,title:'非遗'}}">
						<img src="../../assets/imgs/home/home_culture@2x.png">
						<span>非遗</span>
					</router-link>
				</li>
				<li>
					<router-link to="/shoppingMall">
						<img src="../../assets/imgs/home/home_market@2x.png">
						<span>商城</span>
					</router-link>
				</li>
			</ul>

			<!-- 头条 -->
			<div class="marquee">
				<div class="marquee_title"></div>
				<group class="" style="margin-top:-20px;">
					<cell>
						<marquee>
							<marquee-item v-for="(item,path,index) in marqueeList" :key="index" @click.native="onClick(i)">{{item&&item.title}}</marquee-item>
						</marquee>
					</cell>
				</group>
			</div>

			<!-- 广告 -->
			<!--<div class="nav-gy">
				<swipe class="adver-swiper">
					<swipe-item class="slide1" v-for="(item,path,index) in adverListImg" :key="item && item.id" :id="item && item.id">
						<router-link :to="{name:'news',params:{arr:item&&item}}">
							<img :src="item && item.cover_img" alt="">
						</router-link>
					</swipe-item>
				</swipe>
			</div>-->

			<!-- 当季菌类 -->
			<div class="slide-module">
				<router-link :to="{name:'specialty',params:{type:1,title:'菌库'}}">
					<h3>当季菌类</h3></router-link>
				<ul>
					<li v-for="item in productList" :key="item.id">
						<!--<router-link :to="{name:'bacteriaBank',params:{id:item.id,title:item.title}}">-->
						<router-link :to="{ name: 'bacteriaBank', params: { userId: 123 }}"></router-link>
						<i><img :src="item.cover_img" alt=""></i>
						<p v-text="item.title"></p>
						<span v-text="item.keywords"></span>
						</router-link>
					</li>
				</ul>
			</div>

			<!-- 地道特产 -->
			<div class="slide-module">
				<router-link :to="{name:'specialty',params:{type:2,title:'特产'}}">
					<h3>地道特产</h3></router-link>
				<ul>
					<li v-for="(item,path,index) in Specialty" :key="item&&item.id">
						<i><img :src="item&&item.cover_img" alt=""></i>
						<p v-text="item&&item.title"></p>
						<span v-text="item&&item.keywords"></span>
					</li>
				</ul>
			</div>

			<!-- 人文非遗 -->
			<div class="nav-fy">
				<router-link :to="{name:'specialty',params:{type:1,title:'非遗'}}">
					<h3>人文非遗</h3></router-link>
				<swipe class="adver-swiper">
					<swipe-item class="slide1" v-for="(item,path,index) in adverListImg" :key="item && item.id" :id="item && item.id">
						<router-link :to="{name:'bacteriaBank',params:{arr:item&&item}}">
							<img :src="item && item.cover_img" alt="">
						</router-link>
					</swipe-item>
				</swipe>
			</div>

			<!-- 最新内容 -->
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

				<div class="latestContents">
					<h3>最新内容</h3>
					<div class="content" v-for="item in items.filter(c => c.listlayout == 0)">
						<div class="nav-l">
							<p class="unfold">{{item && item.title | filterFun}}</p>
							<p><span v-text="item&&item.category_name"></span><span v-text="item&&item.view"></span></p>
						</div>
						<div class="nav-r">
							<img :src="item&&item.cover_img" alt="">
						</div>
					</div>
				</div>

				<!-- 三图 -->
				<div class="threePic" v-for="item in items.filter(c => c.listlayout == 2)">
					<h3 v-text="item && item.title"></h3>
					<div class="imglist">
						<span>
								<img :src="item&&item.cover_img" alt="">
							</span>
						<span>
								<img :src="item&&item.cover_img" alt="">
							</span>
						<span>
								<img :src="item&&item.cover_img" alt="">
							</span>
					</div>
					<p class="experience">
						<span v-text="item&&item.source"></span>
						<span v-text="item&&item.view"></span>
					</p>
				</div>

				<!-- 视频 -->
				<div class="palyer" v-for="item in items.filter(c => c.listlayout == 1)">
					<h3 v-text="item && item.title"></h3>
					<div class="dplayer">
						<router-link to="/dplayer">
							<img :src="item&&item.cover_img" alt="">
						</router-link>
					</div>
					<p><span>人物</span><span>999</span></p>
				</div>

			</van-list>

			<!--</van-list>-->
		</van-pull-refresh>
		<div style="" class="backtop" @click="backTop">

		</div>
	</div>

</template>
<script src="vue-seamless-scroll"></script>
<script>
	import Vue from 'vue'
	import Loading from 'vant';
	Vue.use(Loading);
	import { PullRefresh, List } from 'vant';
	import * as homeApi from 'api/home-api'
	import * as linkList from 'api/home-api'
	import { ERR_OK } from 'config/index'
	import Toast from 'common/Toast';
	import axios from 'axios'
	import { Group, Cell, Marquee, MarqueeItem, Divider } from 'vux'
	import searchcomponent from 'common/searchcomponent';
	import {
		Swipe,
		SwipeItem
	} from 'mint-ui';
	import imgs from '../../assets/imgs/img.png'
	import {
		mapMutations,
		mapGetters,
		mapState
	} from 'vuex'
	import commonHeader from 'common/common-header'

	export default {

		data() {
			return {
				texts: "首页传递数据",
				isLoading: false, //下拉刷新
				loading: false, //加载数据
				finished: false,
				showABS: true,
				page: 1,
				//listlayout:false,
				opacityStyle: {
					opacity: 0
				},
				productList: [],
				items: [],
				someListImg: [],
				adverListImg: [],
				//图片列表
				msg: "",
				num: 0,

				//头条滚动
				marqueeList: [],
				Specialty: []
			}
		},
		//管道-字符串截取
		filters: {
			filterFun: function(value) {
				if(value && value.length > 22) {
					value = value.substring(0, 22) + '...';
				}
				return value;
			}
		},
		created() {
			this.showMarquee(this.num)
		},

		components: {
			commonHeader,
			swipe: Swipe,
			swipeItem: SwipeItem,
			Toast,
			searchcomponent,
			Marquee,
			MarqueeItem,
			Group,
			Cell,
			Divider
			// vueSeamlessScroll
		},
		computed: {
			//跳转页面
			...mapState({
				number: state => state.home.number
			}),

		},
		mounted() {
			this.cartView()
			this.advert()
			this.moreLsit()
			setTimeout(() => {
				this.asyncCount = 5
			}, 1000)
		},

		methods: {
			...mapMutations({
				setNum: 'SET_NUM'
			}),
			todetail() {
				alert(1)
				this.$router.togo('/Home/Detail')
			},

			//滚动
			showMarquee: function(num) {
				this.marqueeList.push(this.marqueeList[0]);
				var max = this.marqueeList.length;
				var that = this;
				this.marqueetimer = setInterval(function() {
					num++;
					if(num >= max) {
						num = 0;
					}
					that.num = num * 30;
				}, 3000);
			},

			//			返回顶部
			backTop() {
				document.body.scrollTop = 0
				document.documentElement.scrollTop = 0
			},

			handleScroll() {
				const top = document.documentElement.scrollTop
				if(top > 60) {
					//当下拉60像素后，顶部渐变出现导航栏
					let opacity = top / 140
					opacity = opacity > 1 ? 1 : opacity
					this.opacityStyle = {
						opacity
					}
					this.showABS = false
				} else {
					this.showABS = true
				}
			},

			cartView: function() {
				this.$axios.get('API/v1/homes').then((res) => {
					if(res) {
//						console.log(JSON.stringify(res.data.data.junku.type))
						this.someListImg = res.data.data.banner;
						this.productList = res.data.data.junku;
						this.Specialty = res.data.data.techan;
						this.marqueeList = res.data.data.toutiao;
						this.adverListImg = res.data.data.feiyi;
					} else {

					}

				})
			},
			//广告
			advert: function() {
				this.$axios.get('API/v1/videos').then((res) => {
					if(res) {} else {

					}

				})
			},

			//更多
			moreLsit: function(page) {
				console.log(page)
				this.$axios.get('API/v1/homes/information', {
						params: {
							p:page,
							fileIds: 'id,type,category_name,title,keywords,cover_img,listlayout,cover_img2,cover_img3'
						}
					})
					.then(response => {
						if(response) {
							//@处理更多列表数据
							let list = response.data.data.items;
							response.data.data.items.forEach((val, i)=> {
								this.items.push(list[i]);
							})
							this.page++;
							if(list <= 10) {
								this.finished = true;
							} else {
								this.finished = false;
							}
							this.loading = false;
						} else {
							alert('接口请求错误!')
						}

					})
					.catch(err => {
						console.log("加载异常：" + err)
					});

			},

			//下拉刷新
			onRefresh() {
				setTimeout(() => {
					this.items = [];
					this.page = 1;
					this.moreLsit(this.page)
					this.$toast('刷新成功');
					this.isLoading = false;
				}, 500);
			},
			//上拉加载
			onLoad() {
				setTimeout(() => {
					this.page++;
					this.moreLsit(this.page)
					this.loading = false;
				}, 300);
			}


		},
		activated() {
			window.addEventListener('scroll', this.handleScroll)
		}
	}
</script>

<style scoped lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.Router {
		background: #fff !important;
	}
	/*	/*
	.van-loading {
		z-index: 999;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		margin: auto;
		background: red;
		.van {
			margin: auto;
		}
	}
	*/
	
	.backtop {
		position: fixed;
		bottom: 50px;
		width: 25px;
		height: 25px;
		right: 5px;
		background: url(../../assets/imgs/top2.svg);
		background-size: 100% 100%;
	}
	
	.search {
		z-index: 999;
		width: 100%;
		border-bottom: 1px solid @border-color;
		height: 44px;
		top: 0px;
		position: fixed;
		left: 0;
		background: #fff;
		&:after {
			content: '';
			position: absolute;
			width: 15px;
			height: 15px;
			background: url('../../assets/imgs/search_search@2x.png');
			background-size: 100% 100%;
			top: 15px;
			left: 15px;
		}
		input {
			width: calc(100% - 60px);
			height: 100%;
			padding: 0 15px 0 45px;
		}
	}
	
	.header {
		position: relative;
	}
	
	.page-content {
		padding-bottom: 70px;
		.mt(0) !important;
		position: relative;
		overflow: hidden;
		.sous {
			position: absolute;
			margin: 20px;
			top: 10px;
			right: 0px;
			width: 18px;
			height: 18px;
			z-index: 999;
			background-size: 100% 100%;
			background-image: url('../../assets/imgs/sous.svg');
		}
	}
	
	// 轮播
	.my-swipe {
		height: 180px;
		color: #fff;
		font-size: 30px;
		text-align: center;
		img {
			width: 100%;
			height: 100%;
		}
		.slide1 {
			background: #0089dc;
			color: #fff;
		}
		.slide2 {
			background-color: #ffd705;
			color: #000;
		}
		.slide3 {
			background-color: #ff2d4b;
			color: #fff;
		}
	}
	
	// 专题
	ul.entrance {
		align-items: center;
		background-color: #ffffff;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		height: 95px;
		li {
			text-align: center;
			width: 80%;
			display: inline-block;
			img {
				display: inline-block;
				width: 40px !important;
				height: 40px;
				border-radius: 50%;
				border: 0px;
				width: 90%;
			}
			span {
				display: block;
				overflow: hidden;
				white-space: nowrap;
				width: 100%;
				text-overflow: ellipsis;
			}
		}
	}
	
	//滚动
	.marquee {
		width: calc(100% - 30px);
		padding: 0px 15px;
		align-items: center;
		color: #3A3A3A;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		.marquee_title {
			min-width: 35px;
			height: 35px;
			margin-right: 10px;
			background: url('../../assets/imgs/home/home_todaypage@2x.png');
			background-size: 100% 100%;
		}
		.marquee_box {
			display: block;
			position: relative;
			width: 100%;
			height: 59px;
			overflow: hidden;
		}
	}
	
	// 广告
	.nav-gy {
		padding: 20px 15px 0 15px;
		background: #ffffff;
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				font-weight: bold;
				right: 20px;
				top: 20px;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;
				background-image: url('../../assets/imgs/right-jt.svg');
			}
		}
	}
	
	// 非遗
	.nav-fy {
		border-bottom: 7px solid #f5f5f5;
		padding: 30px 15px 40px 15px;
		background: #ffffff;
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				font-weight: bold;
				right: 0px;
				top: 0px;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;
				background-image: url('../../assets/imgs/right-jt.svg');
			}
		}
	}
	
	// 三张图模块
	.threePic {
		background: #ffffff;
		width: calc(100% - 30px);
		padding: 0px 15px 0 15px;
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			background: #ffffff;
			color: #333333;
		}
		.imglist {
			background: #ffffff;
			height: 75px;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			span {
				margin: 0 5px;
				text-align: center;
				width: 100%;
				display: inline-block;
				display: inline-block;
				&:first-child {
					margin-left: 0px;
				}
				&:last-child {
					margin-right: 0px;
				}
				img {
					width: 100%;
					height: 100%;
					border-radius: 5px;
				}
			}
		}
		.experience {
			margin: 20px 10px;
			display: flex;
			justify-content: space-between;
			color: #cccccc;
			span {
				&:last-child {
					position: relative;
					top: 2px;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	// 最新内容
	.latestContents {
		width: calc(100% - 30px);
		padding: 20px 15px 20px 15px;
		margin-bottom: 20px;
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: calc(100% - 30px);
			text-align: left;
			padding: 0px 0 15px 0px;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				font-weight: bold;
				right: -30px;
				top: 0px;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;
				background-image: url('../../assets/imgs/right-jt.svg');
			}
		}
		.content {
			font-size: 14px;
			display: flex;
			margin-bottom: 20px;
			justify-content: space-between;
			.nav-l {
				text-align: left;
				width: 100%;
				.unfold {
					height: 50px;
				}
				p {
					&:first-child {
						line-height: 25px;
					}
					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: #CCCCCC;
						span {
							&:last-child {
								position: relative;
								&:after {
									position: absolute;
									content: '';
									width: 14px;
									height: 10px;
									background: url('../../assets/imgs/home_browse@2x.png');
									background-size: 100% 100%;
									vertical-align: middle;
									left: -48px;
									right: 0;
									top: 0;
									bottom: 0;
									margin: auto;
								}
							}
						}
					}
				}
			}
			.nav-r {
				margin-left: 25px;
				height: 75px;
				border-radius: 5px;
				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}
	
	// 视频
	.palyer {
		padding: 0 15px 20px 15px;
		width: calc(100% - 30px);
		line-height: 23px;
		h3 {
			font-size: 14px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			background: #ffffff;
			color: #333333;
		}
		.dplayer {
			width: 100%;
			height: 150px;
			position: relative;
			img {
				border-radius: 5px;
				width: 100%;
				height: 100%;
			}
			&:after {
				position: absolute;
				z-index: 998;
				content: '';
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 30px;
				height: 30px;
				background: url(../../assets/imgs/home/details_video@2x.png);
				background-size: 100% 100%;
			}
		}
		p {
			display: flex;
			justify-content: space-between;
			width: 100%;
			color: #CCCCCC;
			margin-top: 18px;
			span {
				&:last-child {
					position: relative;
					&:after {
						position: absolute;
						content: '';
						width: 16px;
						height: 16px;
						left: -20px;
						top: -1px;
						background: url(../../assets/imgs/eye.svg);
						background-size: 100% 100%;
						vertical-align: middle;
					}
				}
			}
		}
	}
	
	// 左右滑动模块
	// 当季菌类
	.slide-module {
		text-align: left;
		background: #fff;
		padding: 30px 0 0px 15px;
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: 100%;
			text-align: left;
			padding: 0px 0 15px 0px;
			color: #333333;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				font-weight: bold;
				right: 15px;
				top: 0px;
				color: #e5e5e5;
				height: 20px;
				width: 20px;
				background-size: 100% 100%;
				background-image: url('../../assets/imgs/right-jt.svg');
			}
		}
		//显示左右滚动的css样式
		ul {
			display: inline-block;
			white-space: nowrap;
			overflow-x: scroll;
			overflow-y: hidden;
			width: 100%;
			li {
				margin-right: 20px;
				display: inline-block;
				width: 138px;
				i {
					display: inline-block;
					width: 138px;
					height: 92px;
					border-radius: 5px;
					img {
						border-radius: 5px;
						width: 100%;
						height: 100%;
					}
				}
				p {
					font-size: 15px;
					font-weight: bold;
					color: @base-black-color;
					padding: 10px 0;
					width: 100%;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				span {
					font-size: 12px;
					font-weight: 500;
					color: @base-color-gray;
					width: 100%;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
	
	.weui-cell__ft {
		height: 44px;
	}
	
	.weui-cells {
		height: 44px;
	}
	
	.vux-marquee-box li {
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 0px !important;
		text-align: left;
		width: calc(100% - 70px);
		padding-left: 20px;
		text-overflow: ellipsis;
		align-items: flex-start;
		height: 20px;
		position: relative;
		&:after {
			position: absolute;
			content: '';
			border-radius: 50%;
			width: 7px;
			height: 7px;
			left: 0;
			top: 5px;
			right: 0;
			background: @border-color;
		}
	}
	
	.vux-marquee {
		height: 40px !important;
		padding-top: 3px;
	}
	
	.weui-cells:before {
		border: 1px solid #fff !important;
	}
	
	.weui-cells {
		margin-top: 0px !important;
	}
	
	.vux-no-group-title {
		margin-top: 0px !important;
	}
	
	.marquee .weui-cells {
		margin-top: 0px !important;
	}
	
	.marquee {
		.weui-cells .vux-no-group-title {
			margin-top: 0px !important;
		}
	}
</style>